<!-- 找回密码组件 -->
<template>
  <div class="findpassword">
    <div class="step">
      <!-- 步骤条 -->
      <van-steps :active="active">
        <van-step>填写信息</van-step>
        <van-step>短信验证</van-step>
        <van-step>修改密码</van-step>
        <van-step>修改完成</van-step>
      </van-steps>
    </div>

    <!-- 填写信息 -->
    <div v-show="active == 0 || active == 2" class="info">
      <van-form @submit="onSubmit">

        <van-field
          v-model="mail"
          type="email"
          name="mail"
          label="邮箱"
          v-if="active == 0"
          placeholder="请输入邮箱"
          :rules="[{ required: true }]"
        />

        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          v-if="active == 2"
          placeholder="请输入密码"
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="password2"
          type="password"
          name="password"
          label="确认密码"
          v-if="active == 2"
          placeholder="请重复上面的密码"
          :rules="[{ required: true }]"
        />

        <div style="margin: 16px">
          <van-button round loading-text="发送中..." :loading="buttonLoading" block type="info" native-type="submit"
            >下一步</van-button
          >
        </div>
      </van-form>
    </div>

    <!-- 验证码输入 -->
    <div v-show="active == 1" class="verify">
      <!-- 密码输入框 -->
      <van-password-input
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
      <button @click="confirm">下一步</button>
    </div>

    <!-- 修改成功 -->
    <div v-show="active == 3" class="success">
      <p>尊敬的用户!您的密码以修改成功<br>请点击按钮返回登录页</p>
      <button @click="gologin">去登录</button>
    </div>
  </div>
</template>

<script>
// 引入组件
import { Form } from "vant";
import { verificationMail, verifyMail } from '@/api/auth'
import { updatePassword } from '@/api/userPassword'
export default {
  name: "Findpassword",
  data() {
    return {
      active: 0,
      value: "",
      showKeyboard: true,
      password : '',
      password2 : '',
      mail : '',
      
      clickShow : false,//
      buttonLoading : false
    };
  },
  methods: {
    onSubmit(values) {
      if(this.clickShow){
        return
      }
      this.clickShow = true
      if (this.active == 0) {
        this.sendMail(values);
      } else if (this.active == 2) {
        if(this.password != this.password2){
          return this.$toast.fail('密码不一致')
        }
        this.updatePwd(values);
      }
    },

    // 发送邮件请求
    sendMail(values) {
      this.buttonLoading = true
      values.type = 'password'
      verificationMail(values).then(res => {
        this.clickShow = false
        this.buttonLoading = false
        if(res.code == 200){
          this.active = 1
        }
      })
    },

    // 修改密码请求
    updatePwd(values) {
      values.sms = this.value
      values.mail = this.mail
      updatePassword(values).then(res => {
        this.clickShow = false
        if(res.code == 200){
          this.$toast.success('修改成功')
          this.active = 3
        }
      })
    },

    // 比对验证码请求
    confirm() {
      if(this.clickShow){
        return
      }
      this.clickShow = true
      verifyMail({
        mail : this.mail,
        sms : this.value
      }).then(res => {
        this.clickShow = false
        if(res.code == 200){
          this.active = 2
          this.$toast.success('效验成功')
        }
      })
    },

    gologin() {
      this.$router.push({
        path: "/login",
      });
    },
  },
  components: {
    [Form.name]: Form,
  },
};
</script>

<style scoped>
.findpassword {
  height: calc(100% - 20px);
  padding: 10px;
  background: #f3f3f3;
}
.step,
.success,
.verify,
.info {
  padding: 20px;
  border-radius: 15px;
  overflow: hidden;
  margin: 20px 0;
  background: #fff;
}
button {
  background-color: #07c160;
  border: 1px solid #07c160;
}
.verify button,
.success button {
  display: block;
  width: calc(100% - 62px);
  height: 44px;
  border-radius: 999px;
  color: white;
  box-sizing: border-box;
  margin: 50px auto;
}
.success p {
  text-align: center;
  font-size: 14px;
  padding: 40px 20px;
  line-height: 40px;
}
</style>